<script setup lang="ts">
import { onMounted, ref } from "vue";
// import { useI18n } from "vue-i18n";
import ElTreeLine from "/@/components/ReTreeLine";
// import { extractPathList, deleteChildren } from "/@/utils/tree";
// import { deleteChildren } from "/@/utils/tree";
// import { usePermissionStoreHook } from "/@/store/modules/permission";
// const { t } = useI18n();
import { postDeptList } from "/@/api/dept";

let menusData = ref([]);
// let menusData = computed(() => {
//   return deleteChildren(usePermissionStoreHook().menusTree);
// });
let loading = ref<boolean>(true);
onMounted(async () => {
  const { code, data } = await postDeptList({
    pageSize: 0
  });
  if (code === 200) {
    loading.value = false;
    // menusData.value = data;
    const firstData = [
      {
        id: 0,
        uniqueId: 0,
        deptDescShrt: "雪花组织架构",
        children: []
      }
    ];
    const dataMap = data.map(item => {
      item.uniqueId = item.id;
      return item;
    });
    const newData = firstData.concat(dataMap);
    menusData.value = newData;
  }
});
// let expandedKeys = extractPathList(menusData.value);
let dataProps = {
  value: "id",
  children: "children",
  label: "deptDescShrt"
};
</script>

<template>
  <el-row :gutter="24">
    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb-20px">
      <el-card v-loading="loading">
        <template #header>
          <div class="card-header">
            <span class="font-medium"> 组织结构 </span>
          </div>
        </template>
        <div class="max-h-550px overflow-y-auto">
          <el-tree
            :data="menusData"
            :props="dataProps"
            default-expand-all
            node-key="id"
            :indent="30"
            ><template v-slot:default="{ node }">
              <el-tree-line :node="node" :showLabelLine="true">
                <template v-slot:node-label>
                  <span class="text-sm">{{ node.data.deptDescShrt }}</span>
                </template>
              </el-tree-line>
            </template>
          </el-tree>
        </div>
      </el-card>
    </el-col>

    <!-- <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span class="font-medium"> 虚拟树结构 </span>
            </div>
          </template>
          <div class="max-h-550px overflow-y-auto">
            <el-tree-v2
              :data="menusData"
              :props="dataProps"
              show-checkbox
              :height="550"
              :default-expanded-keys="expandedKeys"
            >
              <template v-slot:default="{ node }">
                <el-tree-line
                  :node="node"
                  :treeData="menusData"
                  :showLabelLine="true"
                  :indent="30"
                >
                  <template v-slot:node-label>
                    <span class="text-sm">{{ node.data.meta.title }}</span>
                  </template>
                </el-tree-line>
              </template>
            </el-tree-v2>
          </div>
        </el-card>
      </el-col> -->
  </el-row>
</template>
